<template>
	<div class="config-page">
		<el-row :gutter="16">
			<el-col :span="12">
				<UsedApiTable ref="usedApiTableRef" @reloadTable="handleReloadTable" />
			</el-col>
			<el-col :span="12">
				<AllApiTable ref="allApiTableRef" @reloadTable="handleReloadTable" />
			</el-col>
		</el-row>
	</div>
</template>
<script setup>
import UsedApiTable from './leafPages/UsedApiTable.vue'
import AllApiTable from './leafPages/AllApiTable.vue'

const usedApiTableRef = ref(null)
const allApiTableRef = ref(null)

const handleReloadTable = () => {
	usedApiTableRef.value.handleSearch()
	allApiTableRef.value.handleSearch()
}
</script>
<style lang="scss" scoped>
:deep() {
	.el-card {
		.el-card {
			border: 1px solid var(--el-card-border-color);
		}
	}
}
</style>
